<template>
  <!-- 外层滚动容器 -->
  <div class="h-screen overflow-y-auto bg-gray-50">

    
    <!-- 顶部导航 固定-->
    <div class="sticky top-0 z-10">
    <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
      商家列表
    </header>
    </div>

    <!-- 商家列表 -->
    <div class="bg-white ">
        <div 
          v-for="(shop, index) in businessinfoes" 
          :key="index" 
          class="border-b last:border-b-0 d-border" 
        >
          <div class="flex p-4 ">
            <!-- 左侧店铺图片 -->
            <div class="w-20 h-20 sm:w-20 sm:h-20 mr-3  flex-shrink-0">
              <img 
                :src="shop.icon" 
                class="w-full h-full object-cover"
              />
            </div>
            
            <!-- 右侧店铺信息 -->
            <div class="flex-1 min-w-0">
                <!-- 使用 space-y-2 实现等间距 -->
                <div class="space-y-2">
                
                    <!-- 店铺名称 -->
                    <!-- 添加点击 -->
                    <div @click="goToBusinessInfo(shop.id)" class="text-base sm:text-lg font-semibold text-gray-800 truncate cursor-pointer">{{ shop.name }}</div>
                    
                    <!-- 配送信息 -->
                    <div class="flex text-xs text-gray-500">
                        <span>¥{{ shop.minOrderPrice || '15' }}起送</span>
                        <span class="mx-2">|</span>
                        <span>¥{{ shop.deliveryFee || '3' }}配送</span>
                    </div>

                    <!-- 店铺分类 -->
                    <div class="text-xs text-gray-500 mt-1">{{ shop.category || '各种饺子' }}</div>
                </div>
            </div>
          </div>
        </div>
    </div>
    
      

    <main class="pb-20">
      
    </main>
    <Footer class="fixed bottom-0 w-full"/>
    
  </div>
</template>

<script setup>
  import 'swiper/css/autoplay';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  import Footer from '@/components/Footer.vue'
  import usebusinessinfoes from '@/hooks/usebusinessinfoes'
  import { useRouter } from 'vue-router'; // 添加路由钩子

  const router = useRouter(); // 获取路由实例
  const {businessinfoes} = usebusinessinfoes()

  // 跳转实现
  const goToBusinessInfo = (id) => {
    router.push({ path: '/businessinfo', query: { id } });
  };
</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
/* 分割线 */
.d-border {
  border-bottom: 1px solid rgb(165, 163, 163);
}
</style>